<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_extension.extensionService }}</view>
				<view class="u-f-28 u-lh-40 font-medio" @click="jumpUrl('/pages/shop/extension/save/save')">{{ lang_extension.add }}</view>
			</view>

			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>
		<!-- 列表 -->
		<view>
			<view class="card-item">
				<view class="card-box" style="padding: 42rpx 40rpx 34rpx;">
					<view class="u-p-b-20">{{ lang_extension.activityApply }}：{{ dataInfo.createTime }}</view>
					<view class="u-p-b-20">{{ lang_extension.activityExpectedStartTime }}：{{ dataInfo.startTime }}</view>
					<view class="u-p-b-20">{{ lang_extension.activityExpectedEndTime }}：{{ dataInfo.endTime }}</view>
					<view class="u-p-b-20">{{ lang_extension.acitvityExamineStatus }}：{{ dataInfo.promoteStatus  ? lang_extension.acitvityExaminePass: lang_extension.acitvityExamineFailure }}</view>
					<view v-if="dataInfo.promoteStatus" class="u-p-b-20">{{ lang_extension.activityRealStartTime }}：{{ dataInfo.promoteStartTime }}</view>
					<view v-if="dataInfo.promoteStatus" class="u-p-b-20">{{ lang_extension.activityRealEndTime }}：{{ dataInfo.promoteEndTime }}</view>
					<u-gap height="1" bgColor="rgba(151,151,151,.2)"></u-gap>
					
					<view class="u-m-t-28 flex-center-center">
						<view class="flex-center clear-flex u-f-24 u-lh-34">
							<view>{{ lang_extension.extensionDetailTips }}</view>
							<view class="color-red" @click="contactVisible = true">{{ lang_extension.contactPhone }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 留空 -->
		<view style="height: 200rpx"></view>
		
		<!-- 客服电话 -->
		<x-popup
		v-model="contactVisible"
		mode="bottom"
		z-index="9999999"
		>
			<view class="contact-container">
				<view class="u-f-30 u-lh-42 u-text-center color-grew" style="padding: 36rpx 0;">{{ lang_extension.contactNumber }}</view>
				<!-- 分割线 -->
				<u-gap height="0.5" bg-color="rgba(151,151,151,.2)"></u-gap>
				
				<view class="u-f-36 u-lh-50 font-medio flex-center-center" style="padding: 32rpx 0;" @click="contactAction">
					<view class="u-m-r-10">{{ lang_extension.contactPhone }}:</view>
					<view>{{ contactPhone }}</view>
				</view>
				<!-- 分割线 -->
				<u-gap height="8" bg-color="#F5F5F5"></u-gap>
				<view class="u-f-36 u-lh-50 flex-center-center" style="padding: 32rpx 0;" @click="contactVisible = false">
					{{ lang_extension.cancel }}
				</view>
			</view>
		</x-popup>
	</view>
</template>

<script>
	import { merchantPromoteRecordInfo } from '@/api/merchant/merchant.js'
	export default {
		data() {
			return {
				contactVisible: false,
				
				recordId: '',
				dataInfo: {}
			}
		},
		// 获取类型
		onLoad({
			recordId
		}) {
			this.recordId = recordId
			this.initInfo()
		},
		methods: {
			contactAction() {
				this.contactVisible = false
			},
			// 初始化详情
			initInfo() {
				merchantPromoteRecordInfo({ recordId: this.recordId }).then((result) => {
					this.dataInfo = result
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {
		&-item {
			padding: 20rpx 28rpx 0;
		}

		&-box {
			padding: 32rpx 28rpx 40rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
		}
	}
	
	.timeline-dot {
		width: 28rpx;
		height: 28rpx;
		border-radius: 28rpx;
		border: 6rpx solid #d3d3d3;
		&-active {
			@extend .timeline-dot;
			border-color: #fd1e43;
		}
	}
	
	.contact {
		&-container {
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			width: 750rpx;
			background-color: #FFFFFF;
		}
		
		&-box {
			position: relative;
			top: -18rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 690rpx;

		}
	}
</style>
